import './App.css';
import './assets/font/iconfont.css'
import 'swiper/css';
import BottomBar from './components/BottomBar/BottomBar';
import { Route } from "react-router-dom";
import Booklist from './views/Booklist/Booklist';
import Me from './views/Me/Me';
import { message } from 'antd';
import Read from './views/Read/Read';
import BooksDetail from './components/BooksDetail/BooksDetail';

import {
  HashRouter as Router,
  Routes
} from "react-router-dom";
import { useState } from 'react';
function App() {
  const [bookshelf, setbookshelf] = useState([]);
  const [ban, setban] = useState(false);
  const [nowbook, setnowbook] = useState("");
  const [reading, setreading] = useState([]);
  const [booksdetailshow, setbooksdetailshow] = useState(0);
  const [loginType, setloginType] = useState(0);
  function addbookshelf(id) {
    let newbookshelf = bookshelf;
    if (newbookshelf.indexOf(id) === -1) {
      newbookshelf.push(id);
    }
    setbookshelf(newbookshelf);
    console.log(newbookshelf);
  }
  function changebookshelf(newshelf){
    let newbookshelf =[];
    newshelf.forEach(ele=>{
      newbookshelf.push(ele.id);
    })
    setbookshelf(newbookshelf);
  }
  function changebooksid(booksid) {
    message.loading(
      {
        key: 1,
        content: <span>加载中</span>,
        className: "toast",
        duration:0,
      }
    )
    if (nowbook !== booksid) {
      setnowbook(booksid);
    }
    else {
      message.destroy(1);
      showbooksdetail();
    }
  }
  function showbooksdetail() {
    setban(true)
    setbooksdetailshow(1)
  }
  function hidebooksdetail(booksid, init, booksindex) {
    init();
    setbooksdetailshow(0)
    let flag = false;
    let newreading = reading;
    console.log(newreading);
    newreading.forEach((ele, index) => {
      console.log(1);
      if (ele.id === booksid) {
        newreading.splice(index, 1);
        newreading.push({ id: booksid, artindex: booksindex });
        flag = true;
      }
    });
    if (!flag) {
      newreading.push({ id: booksid, artindex: booksindex });
    }
    console.log(newreading);
    setreading(newreading);
    setban(false);
  }
  function setLogin() {
    setloginType(1);
    console.log(loginType);
  }
  return (
    <div className={"main " + (ban ? "ban" : "")}>
      <BooksDetail
        show={booksdetailshow}
        booksdetailshow={booksdetailshow}
        hidebooksdetail={hidebooksdetail}
        nowbook={nowbook}
        bookshelf={bookshelf}
        showbooksdetail={showbooksdetail}
        reading={reading}
        addbookshelf={addbookshelf}
      />
      <Router>
        <Routes>
          <Route exact path="/" element={<Read setban={setban} changebooksid={changebooksid} />} />
          <Route path="/booklist" element={<Booklist bookshelf={bookshelf} changebookshelf={changebookshelf} changebooksid={changebooksid}/>} />
          <Route path="/me" element={<Me reading={reading} loginType={loginType} setLogin={setLogin} />} />
        </Routes>
        <BottomBar >
        </BottomBar>
      </Router>


    </div>
  );
}

export default App;



